{% extends "openvolunteer/base.html" %}

{% block title %}OpenVolunteer | Chercher un(des) bénévole(s){% endblock %}

{% block content %}
    <div>
        <form method="get" action="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/volunteer/?">
            <fieldset>
                <input type="text" id="q" name="q" size="40" maxlength="255" value="{{ terms }}">
                <input class="submit" type="submit" value="Rechercher"><br>
                <span>Les recherches peuvent être effectuées sur le <u>nom</u>, le <u>prénom</u> où les <u>coordonées</u> des bénévoles.</span>
            </fieldset>
        </form>
        <script type="text/javascript"
            src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/jquery/plugins/jquery.autocomplete.js">
        </script>
        <script type="text/javascript">
            // Specify the url for autocompletion in search input
            url = "{{ settings.OPENVOLUNTEER_WEB_ROOT }}/api/volunteer/get/";

            $('#q').autocomplete(url, {
                dataType: 'json',
                // Start search
                minChars: 3,
                // Max items by request
                max: 10,
                // Delay before starting search
                delay: 500,
                // Select or not the first suggestion on tag or return press
                selectFirst: false,
                // Prevent or not the cache
                preventCache: false,
                // What to display in suggestion list
                formatItem: function(data, i, n, value) {
                    return value;
                },
                // What to display and get from json result
                parse: function(data) {
                    var tab = new Array();
                    for (var i = 0; i < data.length; i++) {
                        var res = data[i].fields.firstname + ' ' + data[i].fields.name;
                        var value = data[i].fields.firstname + ' ' + data[i].fields.name;
                        tab[tab.length] = { data: data[i], value: value, result: res };
                    }
                    return tab;
                }
            });

            // Auto put the focus in search input
            $('#q').focus();
        </script>
    </div>
    <div class="search-results">
        {% if results %}
            <table id="resultsTable">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Prénom</th>
                        <th>Email</th>
                        <th>Téléphone fixe</th>
                        <th>Mobile</th>
                        <th>Adresse</th>
                        <th>Date de naissance</th> 
                        <th>Lieu de naissance</th>
                        <th>Numéro de sécu</th>
                        <th>Première inscription</th>
                        <th>CA ?</th>
                    </tr>
                </thead><tbody>
                {% for result in results %}
                    <tr>
                        <td>{{ result.name }}</td>
                        <td>{{ result.firstname }}</td>
                        <td>
                            {% if result.email %}
                                {{ result.email }}&nbsp;
                                <a href="mailto:{{ result.email }}" title="Envoyer un email">
                                    <img src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/icons/email.png" alt="mail" class="icon">
                                </a>
                            {% endif %}
                        </td>
                        <td>{{ result.phone_home }}</td>
                        <td>{{ result.phone_mobile }}</td>
                        <td>{{ result.address }}</td>
                        <td>{{ result.birthday|date:"d F Y"  }}</td>
                        <td>{{ result.birth_place }}</td>
                        <td>
                            {% if result.social_security_number %}
                                {{ result.social_security_number }}
                            {% endif %}
                        </td>
                        <td>{{ result.inscription_date|date:"d F Y" }}</td>
                        <td style="text-align:center;">
                            {% if result.ca_member %}
                                <img src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/icons/yes.png" alt="oui" class="icon">
                            {% else %}
                                <img src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/icons/no.png" alt="non" class="icon">
                            {% endif %}
                        </td>
                        <td class="more">
                            <a href="{{ result.get_absolute_url }}"
                               title="Consulter la fiche détaillée de {{ result }}">
                               Fiche détaillée
                            </a>
                        </td>
                    </tr>
                </tbody>
                {% endfor %}
            </table>
            <div id="dialog_cols_mgt" title="Afficher ou cacher des colonnes" style="text-align:center;">
                <ul id="toogleColsList" class="toogleColsList"></ul>
            </div>
            <script src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/jquery/plugins/jquery.cookie.js"></script>
            <script src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/jquery/plugins/jquery.columnmanager.js"></script>
            <script type="text/javascript">
                $(function() {
                    $('#resultsTable').columnManager({
                        onClass: 'displayed',
                        offClass: 'hidden',
                        listTargetID:'toogleColsList',
                        saveState: true,
                        colsHidden: [6, 7, 8, 9, 10],
                        show: function(c) {
                            $(c).fadeIn(1000);
                        },
                        hide: function(c){
                            $(c).fadeOut(1000);
                        }
                    });

                    $("#dialog_cols_mgt").dialog({
                        bgiframe: true,
                        draggable: true,
                        width:400,
                        modal: true,
                        autoOpen: false
                    });
                });
            </script>
        {% else %}
            <div class="search-error">
                {% if terms %}
                    <p>Le(s) terme(s) de recherche spécifié(s) – {{ terms }} – ne correspond(ent) à aucun document.</p>
                    <p>Suggestions :
                        <ul>
                            <li>Vérifiez l’orthographe des termes de recherche.</li>
                            <li>Essayez d'autres mots.</li>
                            <li>Utilisez des mots plus généraux.</li>
                        </ul>
                    </p>
                {% else %}
                    <h3>Chercher parmis les bénévoles.</h3>
                {% endif %}
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block navigation %}
    <ul>
        <li>
            <a href="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/volunteer/add/" title="Ajouter un bénévole">
                Ajouter un bénévole
            </a>
        </li>
        <li>
            <a href="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/volunteer/list/" title="Générer une liste">
                Générer une liste
            </a>
        </li>
        {% if results %}
            <li>
                <a href='/media/{{ settings.OPENVOLUNTEER_APP_NAME }}/csv/volunteer_list.csv' title="Télécharger la liste générée">
                    Télécharger la liste générée
                </a>
            </li>
            <li>
                <a href="javascript:;" onclick="$('#dialog_cols_mgt').dialog('open');">Afficher ou cacher les colonnes</a>
            </li>
        {% endif %}
    </ul>
{% endblock %}
